<template>

  <el-dialog v-model="dialogFormVisible" 
  :title="title"
  @close="close"
  >
  
    <el-form 
    ref="dialogForm" 
    :model="dialogFormData">
<el-form-item>
  <slot name="upload"></slot>
</el-form-item>
      <el-form-item  v-for="(v, k) in dialogFormData" :key="k" :label='v.label' :label-width="formLabelWidth"
        :prop="(k + '.value')" :rules="{
          required: true,
          trigger: 'blur',
          message: v.label + '不能为空'
        }">
    
        <el-input v-model="v.value" autocomplete="off" />
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm(dialogForm)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref,watchEffect,toRefs } from 'vue';
// 想法：
// 1.根据传入的数据，自动创建出form表单元素,现在默认使用input
// 2.表单需要具备能够检验属性功能
// 3.表单通过和不通过，可以回调对应的方法
// 4.控制显示隐藏的属性
// 5.控制lableWidth的属性
// 声明props

// dialog说明文档
// 属性

//1:visible:Boolean
//2:dialogFormData：Object 表单的数据{name：{lable'item的描述，value：'对应的值''}}
//3. fo rmLabe LWidth:Stirng labe L的宽度
//4. title:String dia log的标题

// 事件：
// validataSuccess点击确定按钮，表单校验通过之后触发,回传一个form实例引用
//dia logCancel点击取消按钮触发的事件
// closed diaLoq被关闭的时候触发的事件
let props = defineProps({
  // 控值表单显示隐藏
  title: {
    type: String,
    default() {
      return '增加学员信息'
    }
  },
  visible: {
    type: Boolean,
    default() {
      return false
    }
  },
  // 控制表单校验
  rules: {
    type: Array,
    default() {

      return []
    }
  },
  // 弹窗表单数据来源
  dialogFormData: {
    type: Object,
    default() {
      return []
    }
  },
  formLabelWidth: {
    type: String,
    default() {
      return '140px'
    }
  },

})

//声明表单校验通过之后的回调

let emits = defineEmits(['validateSuccess', 'dialogCancel','closed'])

//dialogFromVisible的初始值,定义为传递下来的初始值
let dialogFormVisible = ref(false)

//使用watchEffect侦听visible props的滨化 
let {visible}=toRefs(props)

//实时侦听visible props的变化,控制dialog的显示或者隐藏
watchEffect(()=>{
  // console.log(visible.value);
  dialogFormVisible.value=visible.value
})

// 点击取消
let cancel = () => {

  emits('dialogCancel')
}
//确定
// 声明一个ref引用dialog的结构
let dialogForm = ref()
let confirm = (form) => {
  // console.log(dialogForm,'数据');
  // console.log(form);
  form.validate(valid => {
    if (valid) {
      // 校验通过
      emits('validateSuccess', dialogForm)
    } else {
      // 校验不通过
    }
  })
}
// dialog被关闭时触发的方法
let close =()=>{
emits('closed')
}
</script>